<template>
  <div class="holder">
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :xs="24" :sm="8" :lg="4">
        <div class="left">
          <div class="top">
            <div class="image">
              <img src="@/assets/images/书籍 .svg" alt="" />
            </div>
            <p>课程分类</p>
          </div>
          <div class="bottom">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              @node-expand="handlerNodeExpand"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                  <img
                    style="vertical-align: text-top"
                    v-if="data.children.length !== 0"
                    :src="[node.expanded ? treeicon.one : treeicon.two]"
                    alt=""
                  />
                  <img
                    style="vertical-align: text-top"
                    v-if="data.children.length === 0"
                    :src="treeicon.there"
                    alt=""
                  />
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :xs="24" :sm="16" :lg="20">
        <div class="right">
          <!-- 轮播图 -->
          <div class="swiper-container" id="mySwiper">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="carous in bannerList"
                :key="carous.id"
              >
                <img :src="carous.img" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- 如果需要滚动条
        <div class="swiper-scrollbar"></div> -->
          </div>
          <!-- 视频播放 -->
          <div class="bottom">
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
            <div class="video">
              <div class="top">
                <img src="@/assets/images/shipin.jpeg" alt="" />
              </div>
              <div class="explanation">
                <p>课程名称：消防设施维护保养</p>
                <p>主讲老师: XXX</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Swiper from "swiper";
// 引入swiper的样式
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  icon: "el-icon-info",
                  children: [],
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  icon: "el-icon-info",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              children: [],
            },
            {
              id: 6,
              label: "二级 2-2",
              children: [],
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
              children: [],
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [],
            },
          ],
        },
      ],
      // 图标数据
      treeicon: {
        one: require("@/assets/images/空文件.svg"),
        two: require("@/assets/images/文件夹.svg"),
        there: require("@/assets/images/文件.svg"),
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      bannerList: [
        {
          img: require("@/assets/images/1.jpeg"),
          id: 1,
        },
        {
          img: require("@/assets/images/5.png"),
          id: 5,
        },
        {
          img: require("@/assets/images/2.png"),
          id: 2,
        },
        {
          img: require("@/assets/images/3.jpg"),
          id: 3,
        },
        {
          img: require("@/assets/images/4.jpeg"),
          id: 4,
        },
      ],
    };
  },
  mounted() {
    this.slideshow();
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 节点被展开时触发的事件
    handlerNodeExpand(data, node, element) {
      window.console.log(data);
      window.console.log(node);
      window.console.log(element);
    },
    // 轮播图实现
    slideshow() {
      var mySwiper = new Swiper(".swiper-container", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          //点击小球的时候也切换图片
          clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        // scrollbar: {
        // el: '.swiper-scrollbar',
        // },
        autoplay: {
          delay: 5000,
          // 用户操作不停止自动播放
          disableOnInteraction: false,
        }, //1000，即1秒切换一次
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.holder {
  padding: 20px 25px;
  height: 887px;
  // background-color: skyblue;
  @media screen and (min-height: 950px) and (max-height: 990px) {
    padding: 35px 25px;
  }
  @media screen and (min-height: 1070px) {
    padding: 90px 25px;
  }
  .left {
    height: 848px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-sizing: border-box;
    .top {
      height: 9%;
      background-color: #f2f2f2;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      .image {
        width: 50px;
        height: 50px;
        background-color: #aaaaaa;
        border-radius: 25px;
        text-align: center;
        img {
          width: 40px;
          height: 40px;
          margin-top: 5px;
        }
      }
    }
    .bottom {
      height: 90%;
      background-color: #f2f2f2;
      margin-top: 5%;
      ::v-deep .el-tree-node.is-current > .el-tree-node__content {
        // 设置颜色 el-tree 选中节点的颜色
        background-color: rgba(135, 206, 235, 0.2);
        color: #409eff; // 节点的字体颜色
        font-weight: bold; // 字体加粗
      }
      ::v-deep .el-tree-node__content:hover {
        background-color: #66b1ff87;
      }
      ::v-deep .el-tree {
        background-color: #f2f2f2;
        // color: #fff;
      }
    }
  }
  .right {
    width: 100%;
    height: 848px;
    border: 1px solid #ccc;
    .swiper-container {
      //   margin-top: 20px;
      width: 700px;
      height: 400px;
      //   background-color: skyblue;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bottom {
      width: 100%;
      margin-top: 27px;
      height: 420px;
      border-top: 1px solid #ccc;
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
      align-content: center;
      .video {
        width: 24%;
        height: 200px;
        // background-color: skyblue;
        .top {
          img {
            display: block;
            width: 65%;

            text-align: center;
            margin: auto;
          }
        }
        .explanation {
          text-align: center;
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>